<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 20px;">
    <blockquote class="layui-elem-quote news_search">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input value="" id="title" placeholder="请输入关键字1" class="layui-input search_input" type="text">
            </div>
            <a class="layui-btn search_btn" id="search" data-type="search">编号搜索</a>
        </div>
        <div class="layui-inline">
        </div>
        <div class="layui-inline">
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
    </blockquote>
    <div class="layui-form">
        <div class="layui-col-xs12" style="height: 450px;overflow: auto;">
            <table class="layui-hide" id="articleList" lay-filter="demo"></table>
            <script type="text/html" id="operateTpl">
                <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">处理</a>-->
               <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
            </script>
        </div>
    </div>
</div>
<script th:inline="none">
    layui.use(['table', 'layer'], function () {
            var table = layui.table;
            layer = layui.layer;
            //第一个实例
            table.render({
                elem: '#articleList'
                , url: '/list' //数据接口
                , page: true //开启分页
                , even: true //开启隔行背景
                , limit: 7      //默认每页显示10条.
                , cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: '编号', sort: true},//
                    {field: 'courseId', title: '课程id', hide: true},
                    {field: 'courseName', title: '课程名'},
                    {field: 'paperId', title: '试卷id', hide: true},
                    {field: 'paperName', title: '试卷名'},
                    {field: 'studentUsername', title: '学生姓名'},
                    {field: 'grade', title: '分数'}
                ]],
            });
            //监听工具条事件
            table.on('tool(demo)', function (obj) { //demo即为  lay-filter="demo"
                //获取当前行数据
                var item = obj.data;
                //根据监听按钮来作出相应的处理
                if (obj.event === 'detail') {   //obj.event=='XXX' 即为:lay-event="XXX"
                    //当点击回复的时候弹出一个对话层
                    var index = layer.open({
                        type: 2,
                        title: "投诉详情:",
                        maxmin: true,
                        area: ['600px', '700px'],
                        content: 'resp',
                        success: function (layero, index) {
                            var body = layui.layer.getChildFrame('body', index);
                            body.find(".complainId").val(item.complainId);
                            body.find(".productId").val(item.productId);
                            body.find(".complainType").val(item.complainType);
                            body.find(".complainDate").val(item.complainDate);
                            body.find(".customId").val(item.customId);
                            body.find(".customDescribe").val(item.customDescribe);
                            form.render();

                        },
                        end: function () {
                            layer.tips('啊,我要走了', '#about', {tips: 1})
                        }

                    })
                }

            });
            //搜索操作 先获取搜索按钮事件
            $('#search').on('click', function () {
                var type = $(this).data('type');
                //console.log(type);
                active[type] ? active[type].call(this) : '';
            });
            //批量删除的点击事件
            $(".demoTable .layui-btn-danger").click(function () {
                //获取按钮的data-type属性
                var type = $(this).data('type');
                console.log(type);

                active[type] ? active[type].call(this) : '';
            });
            var active = {
                //搜索
                search: function () {
                    //通过id选择器获取搜索框中的内容
                    //val() 单选按钮 复选按钮 文本框
                    //text() 文本
                    //html() 标签
                    var title = $('#title').val();
                    //判断内容是否为空
                    if ($.trim(title).length > 0) {
                        //文本框输入了内容,表格需要重新加载.另外发送一个item请求
                        table.reload('articleList', {
                            page: {curr: 1},
                            //第一个title作为表单数据传出去的key
                            //第二个参数就是js定义的变量(就是我们获取的文本框值)
                            where: {courseName: title}
                        });
                    } else {
                        //$(".layui-laypage-btn")[0].click();//刷新当前页
                        // layer.msg('亲,您未输入任何东西', {icon: 1});
                        layer.tips('亲,您未输入任何东西', '#search', {
                            tips: [2, '#ff6600'],
                            time: 4000
                        });
                        //表格重载
                        table.reload('articleList', {
                            page: {curr: 1},
                            where: {courseName: title}

                        });
                    }
                    table.reload('articleList', {
                        page: {curr: 1},
                        //第一个title作为表单数据传出去的key
                        //第二个参数就是js定义的变量(就是我们获取的文本框值)
                        where: {courseName: title}
                    });
                }
            }
        }
    );


</script>
</body>
</html>